<template>
	<div style='height:100%;'>
		<div v-if='value'>
			<div v-size.paddingLeft='60'>
				<color-block-text type='square' color='#61bae3'>电动车</color-block-text>
				<color-block-text class='m-l-20' type='square' color='#b82793'>汽车</color-block-text>
				<color-block-text class='m-l-20' type='square' color='#a459ff'>换电柜</color-block-text>
				<color-block-text class='m-l-20' type='square' color='#eec152'>充电柜</color-block-text>
			</div>
			<div class='_chart_container m-t-30'>
				<v-chart style='height: 100%;width: 100%;' :options='options'></v-chart>
			</div>
		</div>
		<loading v-else></loading>
	</div>
</template>

<script>
	export default {
		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
			
			}
		},
		
		computed : {
			options () {
				var colorList = [
					['rgba(95, 182, 222, 0)', 'rgba(95, 182, 222, 1)'],
					['rgba(184,39,147, 0)', 'rgba(184,39,147, 1)'],
					['rgba(164,89,255, 0)', 'rgba(164,89,255, 1)'],
					['rgba(238,193,82, 0)', 'rgba(238,193,82, 1)']
				]
				var names = ['电动车', '汽车', '换电柜', '充电柜']
                var data = this.value
                var xAxisData = data.date
				var seriesData = []
				data.data.forEach((item, index) => {
					let serie = {
						type: 'bar',
						name: names[index],
						stack: '2',
						legendHoverLink: false,
						barWidth: 20,
						barMinHeight : 1,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset : 0,
									color : colorList[index][1]
									},
								{
									offset : 1,
									color : colorList[index][0]
								}
							])
						},
						data: item
					}

					seriesData.push(serie)


				})

				var options =  {
					tooltip : {
						trigger: 'axis',
					},
                    
					grid : {
						top : '10px',
						right : '30px',
						bottom : '20px',
						left : '60px'
					},

					xAxis: {
						type: 'category',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},
						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},

						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},

						splitLine : {
							show : true,
							lineStyle : {
								color : '#373f50'
							}
						}
					},
					
					series: seriesData
				}

				return options
			}
		}
	}
</script>

<style scoped>
	._chart_container {
		height: 260px;
	}
</style>